<template v-if="!list">
  <div class="header">
    <span>我的全部购物车&nbsp;&nbsp;</span><span>({{num}})</span>
  </div>

<div class="main">
<SpgCartItem v-if="list" :list='list'></SpgCartItem>
</div>

<div class="empty" v-if="list.length==0">
  <div class="iconfont">&#xe682;</div>
  <p>您的购物车是空的</p>
</div>

 <Tabber show=1></Tabber>
</template>

<script>
import { ref } from '@vue/reactivity'
import SpgCartItem from '../../components/spgCartItem/spgCartItem.vue'
import Tabber from '../../components/tabber/tabber.vue'
const list = ref([])
const num = ref(0)
export default {
  name: 'SpgCart',
  components: {
    Tabber,
    SpgCartItem
  },
  setup () {
    init()
    return { list, num }
  }
}
// 获取数据
const init = () => {
  list.value = []
  num.value = 0
  let key = ''
  let id = 0
  for (const i in localStorage) {
    if (i.includes('ls')) {
      const ls = JSON.parse(localStorage[i])
      switch (i) {
        case 'ls1': key = '沃尔玛'; id = 1; break
        case 'ls2': key = '山姆会员店'; id = 2; break
        case 'ls3': key = '盒马超市'; id = 3; break
        case 'ls4': key = '京东7FRESH七鲜'; id = 4; break
        case 'ls5': key = '百果园'; id = 5; break
      }
      const item = {
        id: id,
        sum: sumAdd(ls),
        key: key,
        value: ls
      }
      list.value.push(item)
    }
  }
}
const sumAdd = ls => {
  let sum = 0
  for (const i of ls) {
    sum = sum + i.sum
  }
  num.value = num.value + sum
  return sum
}
</script>

<style lang='scss' scoped>
.header{
    text-align: center;
    font-size: .16rem;
    padding: .08rem 0 .11rem ;
    background-color: #ffffff;
}
.main{
    overflow-y: auto;
    position: absolute;
    top: .3739rem;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f5f5f5;
    padding: .16rem .18rem .49rem;
}
.empty{
  width: 3rem;
  height: 2rem;
  position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  z-index: 2;
  text-align: center;
  font-size: .16rem;
  .iconfont{
    font-size: .5rem;
  }
}
</style>
